<template>
	<div>
		<div class="temp-link clearfix">
			<a href="javascript:;" v-for="(item,index) in tabData" @click="selectTab(item.tab_item)" :class="{active:currentTab==item.tab_item}">{{item.title}}</a>
		</div>
		<transition name='fade' mode='out-in'>
			<components :is='currentTab' keep-alive></components>
		</transition>
		
	</div>
</template>
<!--康养，慢性病，饮食，急救-->
<script>
	import vTable from '../../common/Table.vue'
	
	import vAid from './common/Aid.vue'
	import vDiet from './common/Diet.vue'
	import vDisease from './common/Disease.vue'
	import vHealthCar from './common/HealthCar.vue'
	export default {
		components:{
			vAid,
			vDiet,
			vDisease,
			vHealthCar
		},
		data(){
			return {
				currentTab: 'vHealthCar',	// currentTab 用于标识当前触发的子组件
				tabData:[
					{ title:'慢性病', tab_item: 'vHealthCar' },
					{ title:'康养', tab_item: 'vDisease' },
					{ title:'饮食', tab_item: 'vDiet' },
					{ title:'急救', tab_item: 'vAid' },
				]
			}
		},
		created(){
		},
		methods:{
			selectTab(item){
				this.currentTab = item
			}
		}
	}
</script>

<style lang="less">
	.temp-link {
  border-bottom: 1px solid #dddee1;
  margin-bottom: 24px;

  a {
    float: left;
    padding: 0 20px;
    height: 60px;
    color: #495060;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
	
    /*&:hover,
    &.on {
      border-bottom-color: #0b9595;
    }*/
  }
  .active{
  	border-bottom-color: #0b9595;
  }
}
</style>